<template>
  <div id="denyDetail">


    <div>
      <Row>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.statedesc')}}:</div> <div><span class="data">{{this.detail.data.statedesc}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.PONumber')}}:</div> <div><span class="data">{{this.detail.data.PONumber}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.senderPerson')}}:</div> <div><span class="data">{{this.detail.data.senderPerson}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.senderName')}}:</div> <div><span class="data">{{this.detail.data.senderName}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.latestUpdateDateTime')}}:</div> <div><span class="data">{{this.detail.data.latestUpdateDateTime}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.shipToName')}}:</div> <div><span class="data">{{this.detail.data.shipToName}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.shipToCountryCode')}}:</div> <div><span class="data">{{this.detail.data.shipToCountryCode}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.recipient')}}:</div> <div><span class="data">{{this.detail.data.recipient}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.T1Customer')}}:</div> <div><span class="data">{{this.detail.data.T1Customer}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.countryOfOrigin')}}:</div> <div><span class="data">{{this.detail.data.countryOfOrigin}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.paymentTerms')}}:</div> <div><span class="data">{{this.detail.data.paymentTerms}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.CompanyTelephone')}}:</div> <div><span class="data">{{this.detail.data.CompanyTelephone}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.currency')}}:</div> <div><span class="data">{{this.detail.data.currency}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.buyerCountryCode')}}:</div> <div><span class="data">{{this.detail.data.buyerCountryCode}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.buyerContactEmail')}}:</div> <div><span class="data">{{this.detail.data.buyerContactEmail}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.buyerContactTelNumber')}}:</div> <div><span class="data">{{this.detail.data.buyerContactTelNumber}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.actualManufacturerUser')}}:</div> <div><span class="data">{{this.detail.data.actualManufacturerUser}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.buyerContactPerson')}}:</div> <div><span class="data">{{this.detail.data.buyerContactPerson}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.season')}}:</div> <div><span class="data">{{this.detail.data.season}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.actualManufacturerCode')}}:</div> <div><span class="data">{{this.detail.data.actualManufacturerCode}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.BuyerAddressLine1')}}:</div> <div><span class="data">{{this.detail.data.BuyerAddressLine1}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.POReviseDate')}}:</div> <div><span class="data">{{this.detail.data.POReviseDate}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.actualManufacturerCountryCode')}}:</div> <div><span class="data">{{this.detail.data.actualManufacturerCountryCode}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.shipToAddressLine1')}}:</div> <div><span class="data">{{this.detail.data.shipToAddressLine1}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.shipToAddressLine2')}}:</div> <div><span class="data">{{this.detail.data.shipToAddressLine2}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.shipToAddressLine3')}}:</div> <div><span class="data">{{this.detail.data.shipToAddressLine3}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.shipToAddressLine4')}}:</div> <div><span class="data">{{this.detail.data.shipToAddressLine4}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.actualManufacturerAddressLine1')}}:</div> <div><span class="data">{{this.detail.data.actualManufacturerAddressLine1}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.actualManufacturerAddressLine2')}}:</div> <div><span class="data">{{this.detail.data.actualManufacturerAddressLine2}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.actualManufacturerAddressLine3')}}:</div> <div><span class="data">{{this.detail.data.actualManufacturerAddressLine3}}</span></div></div></Col>
        <Col span="12"><div class="span left"><div class="flont">{{$t('detail.actualManufacturerAddressLine4')}}:</div> <div><span class="data">{{this.detail.data.actualManufacturerAddressLine4}}</span></div></div></Col>
      </Row>
    </div>



    <div>
      <Table border :columns="columns" :data="ajaxdata" :no-data-text="$t('order.nodata')" :no-filtered-data-text="$t('order.nodata')"></Table>
    </div>
    <div class="demo-spin-container" v-if="spinShow">
      <Spin size="large" fix></Spin>
    </div>
  </div>

</template>

<script>

  export default {
    name: "denyDetail",
    data() {
      return {
        detail: {
          data: ''
        },
        spinShow: true,
        columns: [
          {
            key: "ID",
            width: 100,
            align: "center",
            fixed: "left",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.ID'))
            }
          },
          {
            key: "PONumber",
            title: this.$t('order.PONumber'),
            width: 200,
            align: "center"
          },
          {
            key: "materialReferenceNumber",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.materialReferenceNumber'))
            }
          },
          {
            key: "materialDescription",
            width: 250,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.materialDescription'))
            }
          },
          {
            key: "materialDescription",
            width: 250,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.materialDescription'))
            }
          },
          {
            key: "sustainableMaterialComposition",
            width: 300,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.sustainableMaterialComposition'))
            }
          },
          {
            key: "materialSectionName",
            width: 170,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.materialSectionName'))
            }
          },
          {
            key: "PurchaseDocCode",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.PurchaseDocCode'))
            }
          },
          {
            key: "changePurposeLineStatus",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.changePurposeLineStatus'))
            }
          },
          {
            key: "colorMatchingNote",
            width: 170,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.colorMatchingNote'))
            }
          },
          {
            key: "adidasOrderNumber",
            width: 180,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.adidasOrderNumber'))
            }
          },
          {
            key: "adidasArticleNumber",
            width: 160,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.adidasArticleNumber'))
            }
          },
          {
            key: "adidasWorkingNumber",
            width: 180,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.adidasWorkingNumber'))
            }
          },
          {
            key: "requestDate",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.requestDate'))
            }
          },
          {
            key: "adidasPlanDate",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.adidasPlanDate'))
            }
          },
          {
            key: "priorityAndOrderType",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.priorityAndOrderType'))
            }
          },
          {
            key: "orderQty",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.orderQty'))
            }
          },
          {
            key: "unitPrice",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.unitPrice'))
            }
          },
          {
            key: "orderUOM",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.orderUOM'))
            }
          },
          {
            key: "SessionType",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.SessionType'))
            }
          },
          {
            key: "ModelNo",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.ModelNo'))
            }
          },
          {
            key: "adidasPlanDate",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.adidasPlanDate'))
            }
          },
          {
            key: "ShipMentDate",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.ShipMentDate'))
            }
          },
          {
            key: "lineRemarks",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.lineRemarks'))
            }
          },
          {
            key: "lineExtension1",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.lineExtension1'))
            }
          },
          {
            key: "lineExtension2",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.lineExtension2'))
            }
          },
          {
            key: "lineExtension3",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.lineExtension3'))
            }
          },
          {
            key: "lineExtension4",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.lineExtension4'))
            }
          },
          {
            key: "lineExtension5",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.lineExtension5'))
            }
          },
          {
            key: "confirmedDeliveryDate",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.confirmedDeliveryDate'))
            }
          },
          {
            key: "confirmedDeliveryQty",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.confirmedDeliveryQty'))
            }
          },
          {
            key: "updatedDeliveryDate",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.updatedDeliveryDate'))
            }
          },
          {
            key: "updatedDeliveryQty",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.updatedDeliveryQty'))
            }
          },
          {
            key: "lastShipmentConfirmedDeliveryDate",
            width: 300,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.lastShipmentConfirmedDeliveryDate'))
            }
          },
          {
            key: "lastShipmentConfirmedDeliveryQty",
            width: 300,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.lastShipmentConfirmedDeliveryQty'))
            }
          },
          {
            key: "lastShipmentUpdatedDeliveryDate",
            width: 300,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.lastShipmentUpdatedDeliveryDate'))
            }
          },
          {
            key: "lastShipmentUpdatedDeliveryQty",
            width: 300,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.lastShipmentUpdatedDeliveryQty'))
            }
          },
          {
            key: "weightValue",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.weightValue'))
            }
          },
          {
            key: "weightUOM",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.weightUOM'))
            }
          },
          {
            key: "thicknessValue",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.thicknessValue'))
            }
          },
          {
            key: "thicknessUOM",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.thicknessUOM'))
            }
          },
          {
            key: "lengthValue",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.lengthValue'))
            }
          },
          {
            key: "lengthUOM",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.lengthUOM'))
            }
          },
          {
            key: "heightValue",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.heightValue'))
            }
          },
          {
            key: "heightUOM",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.heightUOM'))
            }
          },
          {
            key: "size",
            width: 200,
            align: "center",
            renderHeader:(h,params)=>{
              return h('span',this.$t('order.size'))
            }
          },
        ],
        ajaxdata: []
      }
    },
    methods: {
      getParams() {
        this.$Loading.start();
        let $data = {
          PONumber: this.$route.params.id
        }
        let $params = {
          params: $data
        }
        this.$axios.get('P_OpenOrderDetails.asp', $params).then((res) => {
          let $info = res.data;
          if ($info.code == 0){
            console.log($info.data)
            this.detail.data = $info.data[0]
            let $resp_data = $info.data
            //过滤数组空字符串
            $resp_data.forEach((val, index) => {
              if (val == "") {
                $resp_data.pop(index)
              }
            })
            this.ajaxdata = $resp_data
            this.spinShow = false
            this.$Loading.finish();
          }else{
            this.$Loading.error();
          }
        })
      }
    },
    mounted() {
      this.getParams()
    }
  };
</script>

<style scoped>
  #denyDetail {
    margin: 0 10px;
    position: relative;
  }
  .span {
    margin: 20px 0;
  }
  .flont {
    width: 49%;
    padding: 4px 7px;
    float: left;
    margin-right: 3px;
    text-align: right;
  }
  /*.left {*/
  /*  float: left;*/
  /*}*/
  /*.right {*/
  /*  float: right;*/
  /*}*/
  .demo-spin-container{
    display: inline-block;
    width: 200px;
    height: 100px;
    border: 1px solid #eee;
  }
  /*.ivu-table-wrapper{*/
  /*  position: unset;*/
  /*}*/
</style>
